<template>
  <el-contianer class="register-container">
    <el-form ref="registerForm" :model="form" class="register-input-box" label-width="130px" label-position="left">
      <el-row style="width: 100%">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="企业法人">
            <el-input v-model="form.legalPerson" placeholder="请输入企业法人"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="width: 100%">
        <el-col :span="12">
          <el-form-item label="密码">
            <el-input v-model="form.password" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="注册资本(万元)">
            <el-input v-model="form.registeredCapital" placeholder="请输入注册资本"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="width: 100%">
        <el-col :span="12">
          <el-form-item label="确认密码">
            <el-input v-model="form.confirmPassword" placeholder="请再次输入密码"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="企业注册时间">
            <el-date-picker placeholder="请输入注册时间" v-model="form.registeredTime" style="width: 230px"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="width: 100%">
        <el-col :span="12">
          <el-form-item label="企业名称">
            <el-input v-model="form.enterpriseName" placeholder="请输入企业名称"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="统一社会信用编码">
            <el-input v-model="form.creditCode" placeholder="请输入统一社会信用编码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="width: 100%">
        <el-col :span="12">
          <el-form-item label="企业类型">
            <el-select v-model="form.enterpriseType" placeholder="--请选择企业类型--" style="width: 230px">
              >
              <el-option label="--请选择企业类型--" value=""></el-option>
              <el-option label="工业企业" value="工业企业"></el-option>
              <el-option label="服务业企业" value="服务业企业"></el-option>
              <el-option label="批发零售企业" value="批发零售企业"></el-option>
              <el-option label="住宿餐饮企业" value="住宿餐饮企业"></el-option>
              <el-option label="建筑业企业" value="建筑业企业"></el-option>
              <el-option label="房地产开发企业" value="房地产开发企业"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="企业法人">
            <el-input v-model="form.legalPerson" placeholder="请输入企业法人"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="width: 100%">
        <el-col :span="12">
          <el-form-item label="企业电话">
            <el-input v-model="form.enterprisePhone" placeholder="请输入企业电话"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="企业地址">
            <el-input v-model="form.enterpriseAddress" placeholder="请输入企业地址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="license">
        <el-col :span="6">
          <span>营业执照</span>
        </el-col>
        <el-col :span="18">
          <el-upload action="http://10.83.149.101/qiniu/upload/" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="2" :auto-upload="true">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-col>
      </el-row>
      <!-- sak -->
      <el-form-item>
        <el-button class="form-submit" type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
      <el-form-item label="验证码">
        <div class="code">
          <el-input v-model="code" style="width:100px"></el-input>
          <el-image src="http://10.13.136.89:9001/syslogin/captcha.jpg" @click="changeImg"></el-image>
        </div>

      </el-form-item>
      <el-form-item>
        <el-button>发送</el-button>
      </el-form-item>
    </el-form>
  </el-contianer>
</template>
<script>
import axios from 'axios';
export default {
  name: "register",
  data() {
    return {
      registerForm: {},
      form: {
        username: "",
        password: "",
        confirmPassword: "",
        enterpriseName: "",
        enterprisePrope: "",
        enterpriseType: "",
        legalPerson: "",
        registeredCapit: "",
        registeredTime: "",
        creditCode: "",
        enterpriseAddress: "",
        businessLicense: "",
        enterprisePhone: "",
      },

      code: "",
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onSubmit() {

    },
    changeImg() {
      axios.
        get('http://10.13.136.89:9001/syslogin/captcha.jpg')
        .then(res => { })
        .error(res => { })

    }
  },
};
</script>
<style lang="less" scoped>
.register-container {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../assets/img/background.jpg);

  .register-input-box {
    width: 900px;
    padding: 5px;
    background-color: rgba(244, 244, 244, 0.8);
    box-shadow: 0 10px 10px rgba(163, 163, 163, 0.42),
      0 0 10px rgba(194, 194, 194, 0.34);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: black;

    .el-form-item {
      width: 80%;
      margin: 20px;

      .form-submit {
        margin-left: 100px;
      }
    }

    .el-image {
      width: 100px;
      height: 100px;
      background-color: #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .license {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;

    .preView {
      width: 100px;
      height: 100px;
      background-color: #ddd;
    }
  }
}
</style>